<template>
	<view>
		<view class="zhanwei"></view>
		<view class="list">
			<view class="list_item flex" v-for="(item,index) in list" @click.stop="xuan(item)">
				<view class="list_item_left">
					<view class="list_item_left_top">
						用药人:{{item.name}}
					</view>
					<view class="list_item_left_bottom">
						{{item.gender == 1?'男':item.gender == 0?'女':'未知'}} | {{item.age}}
					</view>
				</view>
				<image v-if="!isxuan" src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/shanchu.png"
					class="list_item_right" mode="" @click.stop="close(index)"></image>
			</view>
		</view>
		<view class="from">
			<view class="from_item flex">
				<view class="from_item_left">
					姓名
				</view>
				<input type="text" placeholder="请输入" v-model="from.name" class="from_item_right"
					placeholder-style="color: #CCC;">
			</view>
			<view class="from_item flex" @click="show=true">
				<view class="from_item_left">
					姓别
				</view>
				<input type="text" disabled placeholder="请选择" v-model="from.gender" class="from_item_right"
					placeholder-style="color: #CCC;">
			</view>
			<view class="from_item flex">
				<view class="from_item_left">
					年龄
				</view>
				<input type="number" placeholder="请输入" v-model="from.age" class="from_item_right"
					placeholder-style="color: #CCC;">
			</view>
		</view>
		<view class="btn" @click="add">
			新增
		</view>
		<!-- <view class="btn1" @click="queding">
			确定
		</view> -->
		 <u-picker :show="show" :columns="columns" @cancel="cancelSex" @confirm="confirmSex" keyName="label"></u-picker>
	</view>
</template>

<script>
	import {
		partnerAdd
	} from '../../api/login.js';
	import {
		partner,
		partnerDel
	} from '../../api/common.js';
	export default {
		data() {
			return {
				list: [],
				from: {
					name: '',
					gender: '',
					age: '',
				},
				isxuan:false,
				// 性别
				show:false,
				columns:[
                    [{
                        label: '男',
                        // 其他属性值
                        id: 1
                        // ...
                    }, {
                        label: '女',
                        id: 2
                    }]
                ],
			}
		},
		onLoad(e) {
			if(e.isxuan==1){
				this.isxuan = true;
			}
		},
		mounted() {
			this.getList();
		},
		methods: {
			confirmSex(e){
				this.from.gender = e.value[0].label;
				this.show = false;
			},
			cancelSex(){
				this.show = false;
			},
			xuan(item) {
				if(this.isxuan){
					let cpage = getCurrentPages()
					let page = cpage[cpage.length - 2]
					let list = page.$vm.patient_list.filter((items,indexs)=>{
						return items.id == item.id
					})
					console.log(list)
					if(list.length==0){
						page.$vm.patient_list.push(item);
						uni.navigateBack()
					}else{
						uni.showToast({
							title:'此就诊人已选择',
							icon:'none'
						})
					}
				}
			},
			getList() {
				partner().then(res => {
					if (res.code == 200001) {
						this.list = res.data.data
					}
				})
			},
			add() {
				if (this.from.name == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (this.from.gender == '') {
					uni.showToast({
						title: '请输入性别',
						icon: 'none'
					})
					return
				}
				if (this.from.gender != '男' && this.from.gender != '女') {
					uni.showToast({
						title: '请输入正确的性别',
						icon: 'none'
					})
					return
				}
				if (this.from.age == '') {
					uni.showToast({
						title: '请输入年龄',
						icon: 'none'
					})
					return
				}
				let data = {
					...this.from
				}
				if (data.gender == '男') {
					data.gender = 1;
				} else {
					data.gender = 0;
				}
				partnerAdd(data).then(res => {
					if (res.code == 200001) {
						uni.showToast({
							title: '创建成功',
							icon:'none'
						})
						this.from = {
							name: '',
							gender: '',
							age: '',
						}
						this.getList();
					}
				})
			},
			close(index) {
				// this.list.splice(index, 1)
				partnerDel({id:this.list[index].id}).then(res=>{
					uni.showToast({
						title: '删除成功',
						icon:'none'
					})
					this.getList();
				})
			},
			queding() {
				let cpage = getCurrentPages()
				let page = cpage[cpage.length - 2]
				page.$vm.patient_list = this.list
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	page {
		background: #F4F4F4;
		padding-bottom: 200rpx;
	}

	.list {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.list_item:first-child {
		margin-top: 0;
	}

	.list_item {
		border-radius: 12rpx;
		padding: 28rpx 40rpx;
		box-sizing: border-box;
		background: #fff;
		margin-top: 20rpx;
	}

	.list_item_left_top {
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 32rpx;
		font-weight: 400;
	}

	.list_item_left_bottom {
		color: #999;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		margin-top: 12rpx;
	}

	.list_item_right {
		width: 30rpx;
		height: 30rpx;

	}

	.zhanwei {
		width: 100%;
		height: 20rpx;
	}

	.from {
		width: 100%;
		margin-top: 20rpx;
	}

	.from_item {
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 8rpx;
		background: #fff;
	}

	.from_item_left {
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 32rpx;
		font-weight: 400;
	}

	.from_item_right {
		width: 70%;
		text-align: right;
		font-size: 32rpx;
		font-weight: 400;
	}

	.btn {
		width: 690rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: #FFF;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 30rpx;
		font-weight: 400;
		border-radius: 68rpx;
		background: #0165FB;
		position: fixed;
		bottom: 180rpx;
		left: 30rpx;
	}

	.btn1 {
		width: 690rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: #FFF;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 30rpx;
		font-weight: 400;
		border-radius: 68rpx;
		background: #0165FB;
		position: fixed;
		bottom: 80rpx;
		left: 30rpx;
	}
</style>